<template>
  <div class="goods-list">
    <MyHeader title="商品列表页"></MyHeader>
    <MyTable :list="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="{ row }">
        <td>{{ row.id }}</td>
        <td>{{ row.goods_name }}</td>
        <td>{{ row.goods_price }}</td>
        <td>
          <input
            v-model.trim="row.inputValue"
            v-if="row.inputVisible"
            v-focus
            @blur="row.inputVisible = false"
            @keydown.enter="add(row)"
            @keydown.esc="row.inputValue = ''"
            type="text"
          />
          <button
            v-else
            @click="row.inputVisible = true"
            class="btn btn-primary btn-sm"
          >
            +Tag
          </button>

          <br />
          <span
            style="margin-right: 5px"
            class="badge bg-warning text-dark"
            v-for="(item, index) in row.tags"
            :key="index"
          >
            {{ item }}
          </span>
        </td>
        <td>
          <!-- 事件绑定写在哪里，事件处理函数就在哪个组件中 -->
          <button @click="del(row.id)" class="btn btn-danger btn-sm">
            删除
          </button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
//目标1:渲染数据
//1.1在main.js 中给axios 配置基地址
//1.2 在 MyGoodsList.vue 中的created 发送请求获取数据，将数据保存至data
//1.3 将数据传递给 MyTable.vue
//1.4 在MyTable.vue 中循环创建 tr 渲染数据
//1.5 给删除按钮添加 bootstrap 样式

//目标2:使用插槽提高表格的灵活性
//2.1 在MyTable.vue 中使用<slot></slot>占位并设置 name属性
//2.2 在MyGoodsList.vue 中使用<template></template>包裹要传入的标签，并使用v-slot指令指定具体的名称
//2.3 由于 tbody 中的 td 需要用到循环出来的数据，所以还需要使用作用域插槽将数据传递给MyGoodsList.vue 的 template 处

//目标3:渲染徽标
//3.1 使用 v-for 循环 tags 创建span
//3.2 去bootstrap 官网查找徽标类名样式进行修改

//目标4:删除数据
//4.1 给删除按钮绑定点击事件，事件处理函数写在当前组件中
//4.2 点击时传入 id
//4.3 根据 id 找到索引并删除对应的数据

//目标5:添加标签
//5.1 准备 +Tag 按钮和文本框
//5.2 使用 v-if 和 v-else 控制两者的互斥关系(需要使用row.inputVisible属性)
//5.3 给按钮绑定点击事件，点击时将row.inputVisible 设置为 true
//5.4 使用自定义指令，绑定给 input 实现自动聚焦
//5.5 给input 绑定失去焦点事件，修改 inputVisible 为 false
//5.6 给input 绑定键盘按下事件， .esc 修饰符实现清空文本框
//5.7 使用 .enter 修饰符实现非空校验及添加数据(事件传参传入 row)

import MyHeader from '../components/MyHeader.vue'
import MyTable from '../components/MyTable.vue'

export default {
  components: {
    MyHeader,
    MyTable
  },
  data () {
    return {
      list: []
    }
  },
  async created () {
    const res = await this.$axios.get('/api/goods')
    this.list = res.data.data
    console.log(this.list)
  },
  mounted () {},

  methods: {
    del (id) {
      //根据 id 找到对应数据的索引
      let index = this.list.findIndex(item => item.id === id)
      this.list.splice(index, 1)
    },
    add (row) {
      if (row.inputValue.length === 0) return alert('请输入标签内容!')
      row.tags.push(row.inputValue)
      row.inputValue = ''
    }
  },
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.goods-list {
  padding-top: 45px;
}
</style>
